<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
	</head>

	<body>
		<header id="header" class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<!--<h1 class="mui-title">导航栏</h1>-->
		</header>
		<div class="mui-content">
			<div class="mui-content-padded">
				<span style="color:green; font-weight: bold;" v-html="question.Type">[多选题]</span>
				<span v-html="question.Title">开办药品生产企业，必须具备的条件是（      ）。</span>
			</div>
			<ul class="mui-table-view" v-for="item in options">
				<!--<li class="mui-table-view-cell mui-media">
					<div class="mui-media-body mui-checkbox" style="min-height: 32px;">
						<label>B.具有与所生产药品相适应的厂房、设施和卫生环境</label>
						<input name="checkbox1" value="Item 4" type="checkbox" style="margin-top: -5px;">
					</div>
				</li>-->
				<li class="mui-table-view-cell mui-media">
					<div class="mui-media-body mui-checkbox" style="min-height: 32px;">
						<label v-html="item.value">A.具有依法经过资格认定的药学技术人员、工程技术人员及相应的技术工人</label>
						<input name="checkbox1" v-bind:value="item.key" type="checkbox"  style="margin-top: -5px;">
					</div>
				</li>
			</ul>
			<div class="mui-content-padded" style="visibility: visible;" id="divDetails">
				<br>
				<div class="mui-row" style="text-align: center;">---- 详情 ----</div>
				<br>
				<div class="mui-row">
					&nbsp;&nbsp;&nbsp;&nbsp;
					<label v-html="question.Details">
					采用webView的方式来进行Tab切换，代码有点多，可以拷贝官方文档，进行局部修改，其实只要修改subpages即可，主要要和mTab中的设置要一致，否则会报告错误，因为名字错了，就无法找到文件资源，也就无法初始化了。
					</label>
				</div>
			</div>
			<div class="mui-row" style="min-height: 42px;">&nbsp;</div>	
			
			
		</div>
		<nav class="mui-bar mui-bar-tab" style="text-align: center;">
			<div class="mui-pull-left" style="margin-left: 10px;">
				<button type="button" class="mui-btn mui-btn-default" id="btnPrevious">上一题</button>
			</div>
			<div class="mui-pull" style="border: solid red 0px;">
				<span style="color:blue" id="labRight">0</span> / <span style="color: red;" id="labWrong">0</span> / <span id="labCurrent" style="color: black;">1</span> / <span id="labTotal">3200</span>
			</div>
			<div class="mui-pull-right" style="margin-right: 10px;">
				<button type="button" class="mui-btn mui-btn-default" id="btnNext">下一题</button>
			</div>
		</nav>
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/vue.min.js" ></script>
		<script type="text/javascript" src="../js/app.js?v=20190610" ></script>
		<script type="text/javascript">
			mui.init();
			function getDefaultData() {
				return {
					"Id":"6795df7b-1e45-4c48-9ac3-eef4e9a44891",
					"Code":"001",
					"RefItemId":"cb389d57-ffc2-461a-982f-5df678585471",
					"ItemName":"A1食品生产安全管理人员",
					"Title":"申请仿制药注册，省、自治区、直辖市药品监督管理部门现场抽取连续生产的（   ）批样品，送药品检验所检验。",
					"Type":"单选题",
					"Options":"A.1\nB.3\nC.4\nD.5",
					"Answer":"A",
					"Matter":"",
					"Score":null,
					"ExamAmount":null,
					"PassAmount":null,
					"PassRate":null,
					"Details":"试题详解",
					"Remark":"",
				}
			}
			var vm = new Vue({
				el: '.mui-content',
				data: {
					rows:10,
					page:1,
					total:0,
					records:0,
					data: [], //列表信息流数据
					readIndex:0,
					question:getDefaultData(),
					options:[],
				},
				methods:{
					resetData:function(){//重置数据
//						this.$data.refContentId="";
//						this.$data.chapterKeys=[];
//						this.$data.readIndex=0;
//						this.$data.chapter=getDefaultData();
					}
				}
			});
			mui.plusReady(function(){
				var btnPrevious = document.getElementById("btnPrevious");
				btnPrevious.addEventListener('tap', function(event) {
					if(vm.readIndex <= 0)
					{
						mui.toast("已是首页，没有更多内容！");
						return;
					}
					vm.readIndex = vm.readIndex -1;
					loadContent(vm.readIndex,vm.chapterKeys[vm.readIndex]);
				});
				
				var btnNext = document.getElementById("btnNext");
				btnNext.addEventListener('tap', function(event) {
					if(vm.readIndex >= vm.chapterKeys.length - 1){
						mui.toast("已是最后一页，没有更多内容！");
						return;
					}
					vm.readIndex = vm.readIndex +1;
					loadContent(vm.readIndex,vm.chapterKeys[vm.readIndex]);
				});
				
				loadContent();
			});
			
			/**
			 * 加载内容
			 **/
			function loadContent(readIndex,keyValue){
				/*加载数据*/
				var setting = app.getSetting();
				var ajaxUrl = setting.ServerUrl +"/api/ExamQuestion/GetPageList?orderName=Code&orderType=&rows="+vm.rows+"&page="+vm.page+"&queryJson=";
				console.log(ajaxUrl);
				plus.nativeUI.showWaiting("正在加载数据，请稍候...");
				mui.ajax(ajaxUrl,{
					dataType:'json',//服务器返回json格式数据
					type:'get',//HTTP请求类型
					timeout:10000,//超时时间设置为10秒；
					headers:{'Content-Type':'application/json'},	              
					success:function(result){
						plus.nativeUI.closeWaiting();
						//服务器返回响应，根据响应结果，分析是否登录成功；
						console.log(JSON.stringify(result));
						if(result.ResultType != 0){
							mui.toast(result.Content);
							return;
						}
						var appendData = JSON.parse(result.AppendData);
						vm.total = appendData.total;
						vm.data = appendData.rows;
						vm.page = appendData.page;
						vm.records = appendData.records;
						if(vm.data.length > 0)
						{
							vm.readIndex = 0;
							vm.question = vm.data[0];
							console.log(JSON.stringify(vm.question));
							vm.options = [];
							var options = vm.question.Options.split('\n');
							console.log("options.length="+options.length);
							for(var index=0;index < options.length;index++){
								var subIndex = options[index].indexOf('.');
								console.log(subIndex);
								if(subIndex > 0){
									var field = options[index].split('.');
									var obj = {};
									obj.key = field[0];
									obj.value = options[index];
									vm.options.unshift(obj);
								}
								else
								{
									var obj = {};
									obj.key = options[index];
									obj.value = options[index];
									vm.options.unshift(obj);
								}
							}
							console.log(JSON.stringify(vm.options));
						}
					},
					error:function(xhr,type,errorThrown){
						plus.nativeUI.closeWaiting();
						//异常处理；
						console.log(type);
						mui.toast("加载数据异常！");
					}
				});
			}
		</script>
	</body>

</html>